<!--
 * @Description: 小米商城
 * @Author: rendc
 * @Date: 2024-07-10 10:03:05
 * @LastEditors: rendc
 * @LastEditTime: 2024-07-22 09:46:39
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 浏览器选项卡的标题 -->
  <title>
    小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站
  </title>
  <!-- 浏览器选项卡的图标 -->
  <!-- <link rel="icon" href="./image/favicon.ico"> -->
  <!-- 引入Font Awesome的css样式 网络资源-->
  <!-- <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
  <!-- 引入Font Awesome的css样式 bootcdn - 网络资源 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
  <!-- 引入Font Awesome的css样式 要下载d完整的本地资源-->
  <!-- <link href="./css/font-awesome.all.min.css" type="text/css" rel="stylesheet"> -->
  <!-- <link href="./font/xxx" type="text/css" rel="stylesheet"> -->
  <link href="./css/index.css" type="text/css" rel="stylesheet">
  <link href="./css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <!-- a标签组 -->
    <div class="main">
      <a href="https://www.mi.com/">小米官网</a>
      <span>|</span>
      <a href="">小米商城</a>
      <span>|</span>
      <a href="">小米澎湃OS</a>
      <span>|</span>
      <a href="">小米汽车</a>
      <span>|</span>
      <a href="">云服务</a>
      <span>|</span>
      <a href="">IoT</a>
      <span>|</span>
      <a href="">有品</a>
      <span>|</span>
      <a href="">小爱开放平台</a>
      <span>|</span>
      <a href="">资质证照</a>
      <span>|</span>
      <a href="">协议规则</a>
      <span>|</span>
      <a href="" class="download">下载app
        <div class="triangle"></div>
        <div class="downloadApp">
          <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
          小米商城APP
        </div>
      </a>
      <span>|</span>
      <a href="">Select Location</a>
      <!-- 登录等按钮 -->
      <div class="right">
        <a href="" class="login">登录</a>
        <span>|</span>
        <a href="" class="register">注册</a>
        <span>|</span>
        <a href="">消息通知</a>
        <div class="buyCar">
          <!-- 图标 -->
          <i class="fa fa-cart-plus"></i>
          购物车（0）
          <div class="tooltip">
            购物车中还没有商品，赶紧选购吧！
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 内容区 -->
  <div class="mainMiddle">
    <!-- 第一部分 图标 文字 搜索框-->
    <div class="div div1">
      <div class="left">
        <img src="./image/logo.png" alt="">
      </div>
      <div class="middle">
        <div class="text">Xiaomi手机</div>
        <div class="text">Redmi手机</div>
        <div class="text">电视</div>
        <div class="text">笔记本</div>
        <div class="text">平板</div>
        <div class="text">家电</div>
        <div class="text">路由器</div>
        <div class="text">服务中心</div>
        <div class="text">社区</div>
      </div>
      <div class="mainMiddleRight">
        <input type="text" placeholder="风扇">
        <span>
          <i class="fa fa-search"></i>
        </span>
      </div>
    </div>
    <!-- 第二部分  底层轮播图 左侧导航栏悬浮在上面-->
    <div class="div div2">
      <div class="div2Left">
        <ul>
          <li>
            手机
            <span><i class="fa fa-angle-right"></i></span>
            <div class="div2Tooltip">
              Xiaomi MIX 系列
            </div>
          </li>
          <li>电视<span><i class="fa fa-angle-right"></i></span></li>
          <li>家电<span><i class="fa fa-angle-right"></i></span></li>
          <li>笔记本 平板<span><i class="fa fa-angle-right"></i></span></li>
          <li>出行 穿戴<span><i class="fa fa-angle-right"></i></span></li>
          <li>耳机 音箱<span><i class="fa fa-angle-right"></i></span></li>
          <li>健康 儿童<span><i class="fa fa-angle-right"></i></span></li>
          <li>生活 箱包<span><i class="fa fa-angle-right"></i></span></li>
          <li>智能 路由器<span><i class="fa fa-angle-right"></i></span></li>
          <li>电源 配件<span><i class="fa fa-angle-right"></i></span></li>
        </ul>
      </div>
      <!-- <div class="div2Right">
        右
      </div> -->
    </div>
    <!-- 第三部分 四个格子  -->
    <div class="div div3">
      <div class="banner">
        <!-- 第1个div -->
        <div class="active">
          <!-- 光标悬浮调整透明度 -->
          <ul>
            <li>
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
              <a href="">保障服务</a>
            </li>
            <li>
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
              <a href="">企业团购</a>
            </li>
            <li>
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
              <a href="">企业团购</a>
            </li>
            <li>
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
              <a href="">企业团购</a>
            </li>
            <li>
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
              <a href="">企业团购</a>
            </li>
            <li>
              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
              <a href="">企业团购</a>
            </li>
          </ul>
        </div>
        <ul class="image">
          <li>
            <img src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt="">
          </li>
          <li>
            <img src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt="">
          </li>
          <li>
            <img src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt="">
          </li>
        </ul>
      </div>
    </div>
    <!-- 第四部分 横幅图片 -->
    <div class="divBlackBg div4">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b1dfa49e6c0ad7cf68cc34a022dfaf76.jpg?thumb=1&w=2452&h=240&f=webp&q=90" alt="">
    </div>
    <!-- 第五部分 -->
    <div class="divBlackBg div5">
      <div class="phone">
        <div class="phoneTitle">
          <h1>手机</h1>
          <a href="">查看更多<i class="fa fa-angle-right"></i></a>
        </div>
        <img class="leftImg" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dcf9ed8c01a7c3d0bf3ecbca3f22537c.png?thumb=1&w=468&h=1228&f=webp&q=90" alt="">
        <ul class="product">
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
          <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adde6bae41441887017824f46cf31602.png?thumb=1&w=400&h=400&f=webp&q=90" alt="">
            <div class="desc">
              <h1>Readmi Turob 3</h1>
              <h2>性能旋风，席卷而来</h2>
              <h3>1699元起</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第六部分 横幅图片 -->
    <div class="divBlackBg">
      <div class="imgBg">
        <div class="div6">
        </div>
      </div>
    </div>
    <!-- 第七部分 -->
    <div class="div div7">
      <ul>
        <li>
          <i class="fa fa-bicycle"></i>
          预约维修服务
        </li>
        <li>
          <i class="fa fa-bicycle"></i>
          预约维修服务
        </li>
        <li>
          <i class="fa fa-bicycle"></i>
          预约维修服务
        </li>
        <li>
          <i class="fa fa-bicycle"></i>
          预约维修服务
        </li>
        <li>
          <i class="fa fa-bicycle"></i>
          预约维修服务
        </li>
      </ul>
      <div class="div7Main">
        <dl>
          <dt>选购指南</dt>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>笔记本</dd>
        </dl>
        <dl>
          <dt>选购指南</dt>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>笔记本</dd>
        </dl>
        <dl>
          <dt>选购指南</dt>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>笔记本</dd>
        </dl>
        <dl>
          <dt>选购指南</dt>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>笔记本</dd>
        </dl>
        <dl>
          <dt>选购指南</dt>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>手机</dd>
          <dd>电视</dd>
          <dd>笔记本</dd>
          <dd>笔记本</dd>
        </dl>
        <div class="div7MainRight">
          <div class="phone">
            400-100-5678
          </div>
          <div class="desc">
            8:00-18:00（仅收市话费）
          </div>
          <div class="btn">
            <i class="fa fa-commenting"></i>人工客服
          </div>
        </div>
        <div class="div7MainRight div7MainRight2">
          <div class="phone">
            400-180-8888
          </div>
          <div class="desc">
            8:00-18:00（仅收市话费）
          </div>
          <div class="btn">
            <i class="fa fa-commenting"></i>人工客服
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <!-- 脚部 -->
  <!-- <div class="footer">
    脚部
  </div>  -->
  <!-- 右侧悬浮框 -->
  <div class="floating-box"></div>
</body>
<!-- 内部样式表 -->
<style>
</style>
</html>